<template>
  <div class="login-container">
    <div style="user-select: none;margin-left:500px"></div>
    <!-- <div class="login_ti">技术驱动农业未来，数据治理食品安全</div> -->
    <div class="box">
      <div class="bg"></div>
      <!-- <img class="bg" src="../../assets/images/login_background.png"> -->
      <div class="flex-center">
        <el-form
          ref="loginForm"
          :model="loginForm"
          class="login-form"
          :rules="rules"
          auto-complete="on"
          label-position="top"
          :hide-required-asterisk="true"
        >
        <!--        v-if="Math.floor((new Date().getTime()-info.info.end_time*1000)/86400000)>=-30&&Math.floor((new Date().getTime()-info.info.end_time*1000)/86400000)< 0">温馨提醒：您的系统还有{{ Math.abs(Math.floor((new Date().getTime()-info.info.end_time*1000)/86400000)) }}天到期！
      -->
          <div class="title-ts"></div>
          
          <div class="title-container">
            <h3 class="title">登录</h3>
          </div>

          <el-form-item prop="username" label="账号">
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="请输入账号"
              name="username"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>

          <el-form-item prop="password" label="密码">
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="请输入密码"
              name="password"
              tabindex="2"
              auto-complete="on"
              @keyup.enter.native="handleLogin"
            />
            <span class="show-pwd" @click="showPwd">
              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
            </span>
          </el-form-item>


          <div class="tips boxdq">
            <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
            <span @click="forget" style="color:#D1D1D1">忘记密码？</span>
          </div>

          <el-button
            :loading="loading"
            type="primary"
            style="width:100%;margin-top:80px;height:50px;border-radius:10px;"
            @click.native.prevent="handleLogin"
            class="btn"
          >登 录</el-button>
          <div class="login_fo">
            技术支持：
            <a href="http://www.caidj.cn/" target="_black">菜东家</a> 联系我们：400-656-9798
          </div>
        </el-form>

      </div>
    </div>


    <!-- 图形验证 -->
    <div class="puzzle-box" v-if="isVerificationShow">
      <PuzzleVerification
        v-model="isVerificationShow"
        :puzzleImgList="puzzleImgList"
        blockType="puzzle"
        width="300"
        height="175"
        blockSize="40"
        @close="close"
        :onSuccess="handleSuccess"
      />
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import rules from "@/rules/login";
import PuzzleVerification from "@/components/public/puzzleVerification";
import { info } from "@/api/login";
import { setToken } from '@/utils/auth' // cookie

export default {
  name: "Login",
  components: {
    PuzzleVerification,
  },
  data() {
    return {
      // 图片验证
      puzzleImgList: [
        require("../../assets/images/thumbnail-img02.jpg"),
        require("../../assets/images/thumbnail-img03.jpg"),
        require("../../assets/images/timg.jpg"),
      ],
      isVerificationShow: false,
      // 验证
      rules,
      // 登录
      loginForm: {
        remember: false,
        username: "ryg",
        password: "admin123",
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
      // 登陆信息
      info: {
        info: {
          company_name: "菜东家",
        },
      },
    };
  },
  watch: {
    // $route: {
    //   handler: function (route) {
    //     this.redirect = route.query && route.query.redirect;
    //   },
    //   immediate: true,
    // },
  },
  methods: {
    ...mapActions({
      login: "user/login",
    }),
    // 图片验证成功
    handleSuccess() {
      let data=Object.assign(
        this.loginForm,
        {
          code:this.info.code
        },
      )
      this.login(data).then(res => {
          if (res.errcode == 0) {
            this.$router.push({ path:"/"});
            // this.$router.push({ path: this.redirect || "/" });
            setTimeout(() => {
              this.isVerificationShow = false;
            }, 500);
          } else {
            this.$message.error(res.errmsg);
            this.info.code=res.data.code;
            this.isVerificationShow = false;
          }
      });
    },
    // 图片验证关闭
    close() {
      this.isVerificationShow = false;
    },
    // 忘记密码？
    forget() {
      this.$confirm("请联系客服，电话："+this.info.info.mobile+"", "提示", {
        confirmButtonText: "确定",
        showCancelButton: false,
      }).then(() => {}).catch(() => {});
    },
    // 显示密码
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    // 登录
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.isVerificationShow = true;
        } else {
          return false;
        }
      });
    },
    // 登陆信息
    infoin() {
      let data = {};
      info(data).then((res) => {
        if (res.errcode == 0) {
          this.info = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
  created() {
    // 登陆信息
    this.infoin();
    if (localStorage.getItem("loginForm")) {
      if (JSON.parse(localStorage.getItem("loginForm")).remember) {
        this.loginForm = JSON.parse(localStorage.getItem("loginForm"));
      }
    }
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.box{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding-right: 634px;
  .bg{
    // width:1286px;
    min-width:1000px;
    width:100%;
    background: url("../../assets/images/login_background.png") no-repeat;
    background-size: 100% 100%;
  }
  .login-form {
    position: absolute;
    width: 634px;
    max-width: 100%;
    margin: auto;
    top: 0;
    right: 0;
    bottom:0;
    // height: fit-content;
    padding:20vh 93px 50px 68px;
    -moz-box-shadow: 0 2px 14px $subActive;
    -webkit-box-shadow: 0 2px 14px $subActive;
    box-shadow: 0 2px 14px $subActive;
    border-radius: 5px;
    background: $white;
    /deep/.el-form-item__content{
      border-bottom:2px solid #eee;
      .btn{
        height: 80rpx;
      }
    }
  }
}
.login-container {
  min-height: 100%;
  width: 100%;
  // background: url("../../assets/images/login_background.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  /deep/.el-form-item--mini.el-form-item,
  /deep/.el-form-item--small.el-form-item {
    margin-bottom: 25px;
  }

  .puzzle-box {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9;
    background: rgba(0, 0, 0, 0.5);
    user-select: none;
    .puzzle-container {
      width: fit-content;
      height: fit-content;
      margin: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  .title-ts {
    color: $colour_red;
    font-size: $font_14;
    text-align: center;
    position: absolute;
    width: 100%;
    top: -30px;
  }
  .login_ti {
    position: absolute;
    top: 30px;
    left: 30px;
    font-style: italic;
    color: $menuActiveText;
    font-size: $font_18;
    font-weight: bold;
  }
  .login_fo {
    color: $colour_3;
    font-size: $font_14;
    position: absolute;
    bottom: 20px;
    left:0;
    width: 100%;
    text-align: center;
    a {
      color: $colour_3;
      text-decoration: underline;
      &:hover {
        color: $menuActiveText;
      }
    }
  }
  // .login-form {
  //   position: absolute;
  //   width: 400px;
  //   max-width: 100%;
  //   margin: auto;
  //   top: 25%;
  //   right: 0;
  //   left: 0;
  //   height: fit-content;
  //   padding: 20px;
  //   padding-top: 30px;
  //   padding-bottom: 50px;
  //   -moz-box-shadow: 0 2px 14px $subActive;
  //   -webkit-box-shadow: 0 2px 14px $subActive;
  //   box-shadow: 0 2px 14px $subActive;
  //   border-radius: 5px;
  //   background: $white;
  // }
  
  /deep/.el-form-item__error {
    margin-left: 10px;
  }
  /deep/.el-form-item {
    // border: 1px solid $subActive;
    background: $white;
    border-radius: 5px;
    color: #454545;
  }
  /deep/.el-button {
    padding: 0;
    height: 40px;
    line-height: 35px;
    font-size: 16px;
    margin-bottom: 10px !important;
  }

  /deep/.el-input {
    display: inline-block;
    height: 40px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      font-size: 16px;
      color: $colour_3;
      height: 40px;
      caret-color: $colour_3;
    }
  }

  .tips {
    font-size: $font_14;
    span {
      color: $menuActiveText;
      &:hover {
        cursor: pointer;
      }
    }
  }

  .svg-container {
    color: $white;
    vertical-align: middle;
    width: 5px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 22px;
      color: $menuActiveText;
      margin: 0px auto 35px auto;
      text-align: center;
      // font-weight: bold;
      height: 24px;
      line-height: 24px;
      overflow: hidden;
    }
  }

  .show-pwd {
    position: absolute;
    right: 15px;
    top: 3px;
    font-size: 20px;
    color: $subActive;
    // white: pointer;
    user-select: none;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
